<template>
    <div class="insBox">
        <div class="insFirst">
            <div class="insFirst_top">{{ data.itemname }}</div>
            <div class="insFirst_bottom">
                <div class="a">卷号</div>
                <div class="b">{{ data.volume.lenght>0?data.volume:'无' }}</div>
                <div class="a">检验人</div>
            </div>
        </div>
        <div class="insSecond">
            <div :class="data.status?'insSecond_top':'insSecond_top_no'">{{ data.status?'OK':'NO' }}</div>
            <div class="insSecond_bottom">{{ data.inspector }}</div>
        </div>
        <div class="insThird">
            <div class="insThird_top">24-04-18 11:25</div>
            <div class="insThird_bottom">
                <div class="a c">审核人</div>
                <div class="d">{{ data.reviewers }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
const porps = defineProps({
    data:{
        type: Object,
        default: {}
    }
})
</script>

<style scoped>
    .insBox{
        display: flex;
        width: 100%;
        height: 80px;
        font-size: 14px;
        color: white;
        text-shadow: 0 0 0;
        border-top: 1px solid rgb(48, 124, 225);
    }
    .c{
        width: calc((100 - 20px)/2);
        margin-right: 20px;
        height:50px;
        line-height: 50px;
    }
    .d{
        height:50px;
        line-height: 50px;
        width: calc((100 - 20px)/2);
    }
    .insThird_bottom{
        display: flex;
    }
    .insThird_top{
        font-size: 12px;
        text-align: right;
        height: 30px;
        line-height: 30px;
        color: rgb(39, 119, 189);
    }
    .insThird{
        width: calc((100% - 40px)/5*2);
        height: 100%;
        margin-left: 20px;
    }
    .insSecond_top{
        height: 30px;
        text-align: center;
        line-height: 30px;
        width: 100%;
        background:linear-gradient(rgba(255, 255, 0, 0) 0%,rgb(18, 134, 54) 50%);
    }
    .insSecond_top_no{
        height: 30px;
        text-align: center;
        line-height: 30px;
        width: 100%;
        background:linear-gradient(rgba(255, 255, 0, 0) 0%,rgb(206, 27, 27) 50%);
    }
    .insSecond_bottom{
        height: 50px;
        width: 100;
        line-height: 50px;
        text-align: center;
    }
    .insSecond{
        width: calc((100% - 40px)/5);
        height: 100%;
        margin-left: 20px;
    }
    .insFirst{
        height: 100%;
        width: calc((100% - 40px)/5*2); 
    }
    .insFirst_top{
        height: 30px;
        text-align: center;
        line-height: 30px;
        width: 100%;
        background:linear-gradient(rgb(48, 124, 225) 0%,rgba(255, 255, 0, 0) 100%);
        box-shadow: inset 0 0 5px 5px rgb(48, 124, 225);
    }
    .insFirst_bottom{
        height: 50px;
        display: flex;
    }
    .insFirst_bottom div{
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: 0 5px;
    }
    .b{
        flex: 1;
    }
    .a{
        color: rgb(39, 119, 189);
    }
</style>